<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位常见值及原理</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 200px;
            height: 200px;
            margin: 20px;
            background-color: blueviolet;
        }

        .static {
            /* 方位失效 */
            position: static;
            top: 50px;
        }

        .relative {
            /* 参照物 : 自己本身  0 0  -  0 50px  => 50px  不会脱离文档流 */
            position: relative;
            /* top:50px; */
        }

        /* 参照物:  父元素  - position:absolute/relative/fixed  =》往上查找html - 窗口 */
        .parent {
            position: relative;
            margin: auto;
        }

        .absolute {
            position: absolute;
            top: 50px;
        }

        .fixed {
            /* 参照物 - 浏览器窗口 */
            position: fixed;
            bottom: 0;
            right: 0;
        }

        /* position
        fixed   固定不动   - 侧边导航   top/bottom/left/right 
        relative  作为有绝对定位属性的子元素的参照物    -  方位生效  + z-index
        absolute  覆盖 +  重叠  + 叠加   -  父元素 (position：relative/absolute/fixed) /  html

        static 默认值
        sticky   fixed + relative
        

        z-index： 改变层级关系  -  越大 越靠上 反之越靠下  999999999999
         */
    </style>
</head>

<body>
    <!-- sticky粘连定位 -->
    <div class="sticky">sticky粘连定位</div>


    <!-- static默认值 -->
    <div class="static">static默认值</div>

    <!-- relative相对定位 -->
    <div class="relative">relative相对定位</div>

    <!-- absolute绝对定位 -->
    <div class="parent" style="background-color: blue;">
        <div class="absolute" style="background-color: burlywood;">absolute绝对定位</div>
    </div>

    <!-- fixed固定定位 -->
    <div class="fixed">fixed固定定位</div>



    <p style="height:1400px;"></p>
</body>

</html>